<template>
	<view class="">
		<u-sticky v-if="dataList.length != 0">
			<view class="row between" style="padding: 20upx;">
				<view class=""></view>
				<view class="" @tap="changStoreModel">{{ canOptions ? "管理" : "完成" }}</view>
			</view>
		</u-sticky>
		<s-pull-scroll
			ref="pullScroll"
			:enablePullUp="false"
			:pullDown="pullDown"
			:pullUp="loadData"
			:back-top="true"
			:headerHeight="40"
			:footerHeight="footerHeight"
		>
			<u-row gutter="20" style="flex-wrap: wrap;">
				<u-col span="6" v-for="(item, index) in dataList" :key="index">
					<view class="item-con" @tap.stop="navTo(`/pages/details/goodDetails?id=${item.id}`)">
						<image :src="item.icon" mode="" class="item-g"></image>
						<view class="item-info">
							<view class="clamp2 item-title">{{ item.name }}</view>
							<view class="item-price">￥{{ item.price }}</view>
						</view>
						<view class="item-pop row center" v-if="item.goodsStatus != 0">
							<image src="/static/img/yihsouxin.png" mode="aspectFill" class="item-s"></image>
						</view>
						<view class="item-circle row center" v-if="!canOptions" @tap.stop="userOptionsItem('item', item)">
							<icon type="success" color="#CC1313" size="21" v-if="item.checked" />
							<icon type="circle" size="21" v-else />
						</view>
					</view>
				</u-col>
			</u-row>
		</s-pull-scroll>

		<view class="footer-con b-t" v-if="!canOptions">
			<view class="footer-btn row between">
				<view class="row" @tap="userOptionsItem('all')">
					<icon type="success" color="#CC1313" size="21" v-if="allChecked" />
					<icon type="circle" size="21" v-else />
					<text class="check-all">全选</text>
				</view>
				<view class="btn" hover-class="hover-opacity" @tap="delCart">删除</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
		<mix-modal ref="mixModal" text="确定删除吗?删除后将无法恢复!" title="温馨提示" @onConfirm="userCancleGoods"></mix-modal>
	</view>
</template>

<script>
import pagesItem from "@/components/page-item-list/page-goos-item.vue";
export default {
	components: {
		pagesItem
	},
	data() {
		return {
			canOptions: true,
			dataList: [],
			ids: [],
			allChecked: false
		};
	},
	computed: {
		footerHeight() {
			let height = 20;
			if (!this.canOptions) {
				height = uni.getSystemInfoSync()["statusBarHeight"] + 40;
			}
			return height;
		}
	},
	watch: {
		dataList: {
			handler(newval) {
				if (newval.length != 0) {
					let array = newval.filter(item => item.checked);
					if (array.length == newval.length) {
						this.allChecked = true;
					} else {
						this.allChecked = false;
					}
				}
			},
			immediate: true,
			deep: true
		}
	},
	onShow() {
		this.refresh();
	},
	methods: {
		changStoreModel() {
			this.canOptions = !this.canOptions;
			this.initCart();
		},
		initCart() {
			this.dataList.forEach(item => {
				item.checked = false;
			});
		},
		userOptionsItem(type, item) {
			let checked;
			if (type === "all") {
				checked = !this.allChecked;
				this.dataList.forEach(item => {
					item.checked = checked;
				});
			} else {
				checked = !item.checked;
				item.checked = checked;
			}
		},
		delCart() {
			let array = this.dataList.filter(item => item.checked);
			this.ids = array.map(item => item.id);
			if (array.length == 0) {
				this.$util.msg("请选择要删除的商品!");
				return;
			}
			this.$refs.mixModal.open();
		},
		//   取消收藏
		async userCancleGoods() {
			const data = {
				uid: uni.getStorageSync("uid"),
				ids: this.ids.join(",")
			};
			const res = await this.$request("goods/collect-del", data, {showLoading: true});
			if (res.result == 0) {
				this.$util.msg("取消收藏成功！");
				this.refresh();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				pageNo: pullScroll.page,
				pageSize: "10",
				type: 8
			};
			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			const res = await this.$request("goods/goods-list", data, {showLoading: true});
			if (res.result == 1 || res.data.list.length == 0) {
				pullScroll.empty();
				return;
			}
			res.data.list.forEach(item => {
				item.checked = false;
			});
			this.dataList = this.dataList.concat(res.data.list);
			pullScroll.page >= Math.ceil(res.data.count / 10) ? pullScroll.finish() : pullScroll.success();
		}
	}
};
</script>
<style scoped lang="scss">
.footer-con {
	position: fixed;
	width: 100%;
	bottom: 0;
	padding-bottom: var(--status-bar-height);
	background: #ffffff;
}
.footer-btn {
	padding: 0 20upx;
	height: 100upx;
}
.btn {
	width: 192upx;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	border: 1px solid #cc1414;
	border-radius: 35upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #cc1414;
}
.check-all {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	margin-left: 10upx;
}
.item-con {
	position: relative;
	margin-top: 20upx;
	border-radius: 20upx;
	overflow: hidden;
	box-shadow: 0px 0px 60upx 0px rgba(168, 168, 168, 0.2);
}
.item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 44upx;
}
.item-price {
	font-size: 33upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
}
.item-g {
	width: 100%;
	height: 330upx;
}

.item-circle {
	position: absolute;
	top: 20upx;
	right: 20upx;
}
</style>
